<template>
  <view class="my-address-box">
     <view class="address-choose-box" v-if="addressList.length === 0" >
        <button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">请选择收货地址+</button>
      </view>
    <view class="my-address-info" v-else @click="chooseAddress">
      <view class="user-info">
        <text class="user-text iconfont icon-wode09">姓名：{{JSON.stringify(nowAddress) !== '{}' ? nowAddress.consigneeName : addressList[0].consigneeName}}</text>
        <text class="phone-text iconfont icon-call">电话：{{JSON.stringify(nowAddress) !== '{}' ? nowAddress.phone : addressList[0].phone}}</text>
        <text class="address-text iconfont icon-a-dingwei2">地址：{{JSON.stringify(nowAddress) !== '{}' ? nowAddress.consigneeRegion: addstr}}</text>
      </view>
      <view class="iconfont icon-chevron-right"></view>
    </view>
  </view>
</template>

<script setup>
 import {computed, reactive, ref} from 'vue'
 import {useStore} from 'vuex'
 const store = useStore()
 const addressList = reactive(store.state.user.address)
 
 const props = defineProps({
   nowAddress: {
     type: Object,
     default: () => ({})
   }
 })
 // console.log(addressList[0].consigneeName, '222');
 console.log(props.nowAddress ,'333');
 const chooseAddress = async () => {
   
  uni.navigateTo({
    url: '/subpkg/address-list/address-list'
  })
   
   // 微信自带收货地址API
   // const data = await uni.chooseAddress().catch(err => err)
   // console.log(data);
   // if(data.errMsg === "chooseAddress:ok") {
   //   addressList.value = data
   //   store.dispatch('user/updateAddress', addressList.value)
   // }
   
 }
 
 const addstr = computed(() => {
    if(!addressList[0].consigneeRegion) return
       // 拼接 省，市，区，详细地址 的字符串并返回给用户
    return addressList[0].consigneeRegion + ' ' + addressList[0].detailedAddress
 })
</script>

<style lang="scss">
  // 选择收货地址的盒子
  .address-choose-box {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.my-address-box {
  display: flex;
  align-items: center;
  padding:0 20rpx;
  justify-content: center;
  .icon-chevron-right {
    font-size: 50rpx;
  }
  .my-address-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .user-info {
      display: flex;
      flex-direction: column;
      margin: 15rpx 0;
      .user-text,.phone-text,.address-text {
        margin: 15rpx 0;
      }
    }
  }
}
</style>